<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<style type="text/css">
			body,html{height: 100%;}
		#box{width: 640px;height: 100%;display: -webkit-box;-webkit-box-orient: vertical;}
		.header-top{width:100%;height:180px;position: relative;overflow: hidden;position: fixed;top: 0;}
		.car-shop{outline:none;border:none;position: absolute;right: 35px;top: 14px;height: 60px;width: 124px;background:#c80f0d;border-radius: 14px 14px;}
		.top-middle{height: 90px;background: #a90506;position: relative;}
		.car-shop i{font-size: 30px;color:#fff;font-style:normal ;}
		.top-middle h2{text-align: center;line-height: 90px;color: #FFFFFF;font-size: 26px;}
		.group-list{height: 90px;background: #9B9B9B;}
		.content{position:relative;-webkit-box-flex: 1;margin-top:180px ;overflow: scroll;}
	/*	.gocar{height:200px;padding: 25px 30px;border-bottom: 1px solid #cbcbcb;}
		.carimg{width: 175px;height: 175px;border: 1px solid #a9a9a9;float: left;}
		.carimg img{width: 175px;height: 175px;}
		.imgdetail{height: 75px;width: 320px;float: left;padding-left:25px;}
		.imgdetail li{line-height: 40px;font-size: 24px;}
		.imgdetail li span{padding-left: 10px;}
		.pric{color: red;}
		.numb{width:100px;height: 40px;margin: 0 10px;}
		.imgdetail li input{text-align: center;height: 40px;border-radius: 4px 4px;font-size: 20px;outline: none;}
		#increa{border: none;width: 56px;}
		#reduce{border: none;width: 56px;}
		.iconft{float:right;font-size:40px;}*/
		.car_list{
				padding:0 34px;
				
			}
			.car_list li{
				height:180px;
				padding:25px 0;
				border-bottom:2px solid #aaa;
				position: relative;
			}
			.car_list p{
				line-height:42px;
				font-size:28px;
				float: left;
				width:340px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.car_list span{
				color:#a91a1c;
			}
			.car_list b{
				width:54px;
				height:38px;
				line-height:38px ;
				text-align: center;
				color:white;
				display: inline-block;
				background:#717171;
				border-radius: 8px;
				margin:0 14px;
			}
			.car_list img{
				width:174px;
				height:174px;
				float: left;
				margin-right:25px;
			}
			.car_list input{
				width:76px;
				height:38px;
				font-size:38px;
				line-height: 38px;
				text-align: center;
				display: inline-block;
				box-shadow: 0 0 2px 2px #ccc inset;
			}
			.car_list i{
				position: absolute;
				right:0;
				top:30px;
				font-size:34px;
			}
		.foot{position:fixed;bottom:0;width:100%;height:98px;background: #484850;display: -webkit-box;-webkit-box-orient: horizontal;}
		.common-page{padding-top:10px;-webkit-box-flex: 1;text-align: center;position:relative;}
		.foot i{font-size: 52px;}
		.foot a{color:#fff;}
		.foot span{display: block;}
		.active{height: 5px;width:100%;background: red;display: block;position: absolute;top: 0;left: 0;}
		.group-list ul{padding-left: 25px;}
		.group-list li{float: left;font-size: 30px;line-height: 90px;height: 90px;color: #fff;}
		.group-list li:nth-of-type(2){padding:0 20px;}

		</style>
	</head>
	<body>
		<div id="box">
			<header class="header-top">
				<div class="top-middle">
					 <h2>购物车</h2>
					 <button class="car-shop"><i>结算</i></button>
			    
				</div>
			   <div class="group-list">
			   	  <ul>
			   	  	<li>商品数量:</li>
			   	  	<li id="all-number"></li>
			   	  	<li>应付总额(不含运费)：</li>
			   	  	<li id="all-money"></li>
			   	  </ul>
			   </div>
			</header>
			<section class="content">
			  <!-- <div class="gocar">
			   	  <div class="carimg">
			   	  </div>
			   	  <div class="imgdetail">
			   	  	<ul>
			   	  		<li>为激发科技网科技服务卡</li>
			   	  		<li>单价：<span>1324</span></li>
			   	  		<li>
			   	  			数量：
			   	  			<span>
			   	  				<input type="button" name="" id="reduce" value="-" />
			   	  				<input type="text" name="" class="numb" value="1" />
			   	  				<input type="button" name="" id="increa" value="+" />
			   	  			</span>
			   	  		</li>
			   	  	</ul>
			   	  </div>
			   	  
			   </div>-->
			   	<ul class="car_list">
					<!--<li>
						<img>
						<p></p>
						<p></p>
						<p></p>
						<p></p>
					</li>-->
				</ul>
			</section>
			<footer class="foot">
				
				<div class="home-page common-page">
					<strong class="active"></strong>
					<a href="#">
						<i class="iconfont">&#xe644;</i>
						<span>首页</span>
					</a>
				</div>
				<div class="classify common-page">
					<a href="#">
						<i class="iconfont">&#xe692;</i>
						<span>分类</span>
					</a>
				</div>
				<div class="shop-car common-page">
					<a href="#">
						<i class="iconfont">&#xe61b;</i>
						<span>购物车</span>
					</a>
				</div>
				<div class="home-show common-page">
					<a href="#">
						<i class="iconfont">&#xe646;</i>
						<span>我的秀</span>
					</a>
				</div>
				<div class="more common-page">
					<a href="#">
						<i class="iconfont">&#xe69a;</i>
						<span>更多</span>
					</a>
				</div>
			</footer>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="js/shopcar.js"></script>
	<script type="text/javascript">
	
	$(function(){
		var c=localStorage.getItem("username")
	     $.ajax({
	     	type:'GET',
	     	url:'http://datainfo.duapp.com/shopdata/getCar.php',
	     	dataType:'jsonp',
	     	data:{userID:c},
	     		success:function(data){
						console.log(data.goodsID);
						var li_num = [];
						$.each(data, function(i) {
							li_num[i] = data[i].number;
							
							var oLi = $("<li>");
							var oImg = $("<img src='"+data[i].goodsListImg+"'/>");	
							var oP1 = $("<p>"+data[i].goodsName+"</p>");
							var oP2 = $("<p>"+data[i].className+"</p>");
							var oP3 = $("<p>单价：<span>￥"+data[i].price+"</span></p>");
							var oP4 = $("<p>数量：<b class='reduce'>-</b><input class='numb' type='text' value='"+data[i].number+"'><b class='add'>+</b></p>");
							var oI = $("<i class='iconfont icon'>&#xe68d;</i>");
							$(oLi).append(oImg);
							$(oLi).append(oP1);
							$(oLi).append(oP2);
							$(oLi).append(oP3);
							$(oLi).append(oP4);
							$(oLi).append(oI);
							$(".car_list").append(oLi);
							
						});
						
						$('.icon').click(function(){
							var _index = $(this).parents("li").index();
							getajax(data[_index].goodsID,0)
							$(this).parents("li").remove()
							count();
						})
						 $(".numb").focus(function() {
				      $(this).css("outline","none");  
				     });
				     $(".numb").keyup(function() {
				        var reg=/\s+/;
				        if(parseInt($(this).val())<1 || isNaN(Number($(this).val())) || reg.test($(this).val())){
				          $(this).val(1); 
				        }
				     });
				     $(".numb").blur(function() {
				        if($(this).val()==""){
				          $(this).val(1); 
				        }else{
				        	var _index = $(this).parents("li").index();
							getajax(data[_index].goodsID, $(this).val())
							count();
				        }
				     });
						count();
						//点击数量加减
						$(".reduce").click(function(){
							var _index = $(this).parents("li").index();
							li_num[_index]--;
							if(li_num[_index]<=1){
								li_num[_index]=1
							}
							getajax(data[_index].goodsID,li_num[_index])
							$(this).siblings("input").val(li_num[_index]);
							count();
							
						})
						$(".add").click(function(){
							var _index = $(this).parents("li").index();
							li_num[_index]++;
							console.log(li_num[_index]);
							getajax(data[_index].goodsID,li_num[_index])
							$(this).siblings("input").val(li_num[_index]);
							count();
						})
					}
	     	
	     })
	   
	   
	    	
	    
	
	
		function bodyScale(){
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/640;
				document.body.style.zoom=scale;
			}
			window.onresize=window.onload=function(){
				bodyScale();
			}
			
			//计算总量
			function count(){
				var all_num = 0,
					all_price = 0;
				$.each($(".car_list li"), function(i) {
					console.log($(".car_list li").length);
					all_num += Number($(this).find("input").val());
					all_price += Number($(this).find("input").val())*parseInt($(this).find("span").text().replace(/[^\d]/g,""));
					console.log(all_num,all_price);
				});
				
				$("#all-number").text(all_num);
				$("#all-money").text(all_price);
			}
	})
		
	</script>
</html>
